<template>
  <div class="people-remark remark-1">
    <Avatar></Avatar>
    <h2 class="people-id">是蛙蛙呀</h2>
    <div class="people-identity">预备党员</div>
    <div class="remark-text">    值得一提的是，全国灯会灯彩项目展在秦淮非遗馆同时举办。展览设置瑞龙贺春、非遗新韵、匠心传承、盛世欢歌4个板块，汇聚全国15个省市35项灯会灯彩非遗代表性项目150余件作品，生动展示灯会灯彩非遗保护传承成果，搭建了全国灯会灯彩非遗项目传承人交流展示的平台，让市民和游客在张灯结彩中寻味非遗里的中国年。
      <br>　   不久，红军离开遵义，经过桐梓、渡过赤水河。这一行动引起敌人极大的恐慌。四川军阀急忙抽调兵力到川黔边境布防，并封锁长江、防止红军北渡和红四方面军汇合。这时毛主席指挥红军突然甩开敌人，重占桐梓、娄山关，回师遵义，一举歼灭敌人20个团，红军部队喜气洋洋，出墙报、编快板、赋诗作歌，庆祝长征以来第一次大的胜利。</div>

    <!--                        评论末尾-->
    <ul class="remark-footer">
      <li class="remark-list">
        <div class="remark-time">2024年2月8日</div>
      </li>
      <li class="remark-list">
        <div class="remark-svg praise-svg"></div>
        <div class="praise-text">8888</div>
      </li>
      <li class="remark-list">
        <div class="remark-svg reply-svg"></div>
        <div class="reply-text">回复</div>
      </li>
    </ul>

  </div>
</template>

<script setup>

import Avatar from "../../avatar/Avatar.vue";
</script>

<style scoped>
.people-remark{
  width:60rem;
  /*height:30rem;*/
  /*background-color: yellow;*/
  margin: 0 auto;
  margin-left: 2rem;
  margin-top:2rem;
  position: relative;
}

.people-id{
  font-size: 1.3rem;
  color:rgba(156, 0, 0, 1);
  font-weight: 700;
  font-family: 黑体;
  position: absolute;
  top:1rem;
  left:10%;
}
.people-identity{
  width:5.5rem;
  height:1.8rem;
  position: absolute;
  top:0.8rem;
  left:22%;
  background-color:rgba(156, 0, 0, 1);
  font-size: 8.5px;
  line-height: 1.8rem;
  font-weight: bold;
  border-radius:50px;
  text-align: center;
  /*font-family: "思源黑体";*/
  color:rgb(250,250,250);
}

.remark-text{
  width:54rem;
  /*height:15rem;*/
  margin-left:6rem;
  font-size: 12px;
  line-height: 1.7rem;
  text-indent: 24px;
}
.remark-footer{
  width:30rem;
  height:5rem;
  display: flex;
  color:rgba(166, 166, 166, 1);
  font-weight: 400;
  font-family: 思源黑体;
  letter-spacing: 2px;
  margin-left:4rem;
  margin-top:1.5rem;
}
.remark-list{
  margin-left: 2rem;
  display: flex;
}
.remark-svg{
  cursor: pointer;
  width:2rem;
  height:2rem;
  background-size: 1.8rem 1.8rem;
  background-position: center;
}
.praise-svg{

}
.reply-svg{
  margin-top: 1.5px;
}
.praise-text,.reply-text,.remark-time{
  font-size: 10px;
  margin-left: 4px;
  line-height: 2.5rem;
}
</style>
